<template>
    <div class="detail">
<!--        医院名字与医院等级-->
        <div class="top">
            <div class="title">{{ hospitalStore.hospitalInfo.hospital?.hosname }}</div>
            <div class="level">
                <svg t="1688800515174" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2328" width="16" height="16">
                    <path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                          p-id="2329" fill="#d81e06"></path>
                </svg>
                <span>{{ hospitalStore.hospitalInfo.hospital?.param.hostypeString }}</span>
            </div>
        </div>

        <div class="logo">
            <div class="left">
                <img :src="`data:image/jpeg;base64,`+hospitalStore.hospitalInfo.hospital?.logoData" alt="">
            </div>
            <div class="right">
                <svg t="1688809098783" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3434" width="36" height="36"><path d="M512 128c169.6 0 308 138.4 308 308 0 81.6-31.2 158.4-88.8 216l-4.8 4L512 869.6 298.4 656.8l-4.8-4.8c-57.6-57.6-88.8-134.4-88.8-216C204 266.4 342.4 128 512 128m0-64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m0 192c73.6 0 132.8 62.4 128 137.6-4.8 63.2-55.2 113.6-118.4 118.4-74.4 5.6-137.6-53.6-137.6-128 0-70.4 57.6-128 128-128" p-id="3435"></path></svg>
                <div class="context">
                    <div>具体地址:{{hospitalStore.hospitalInfo.hospital?.param.fullAddress}} </div>
                    <div>规划路线:{{hospitalStore.hospitalInfo.hospital?.route}} </div>
                </div>
            </div>
        </div>

        <div v-if=" hospitalStore.hospitalInfo.hospital?.intro">医院介绍</div>
        <div v-if="hospitalStore.hospitalInfo.hospital?.intro"  class="introduce">
             <p>
                 {{hospitalStore.hospitalInfo.hospital?.intro}}
            </p>
        </div>

    </div>
</template>

<script setup lang="ts">
//引入医院详情的仓库
import useDetailStore from "@/store/modules/hospitalDetail.ts";

let hospitalStore = useDetailStore()
</script>


<style scoped lang="scss">

.detail {
    .top {
        display: flex;

        .title {
            font-size: 30px;
            font-weight: 900;
        }

        .level {
            color: #7f7f7f;
            margin-left: 10px;
            height: 40px;
            margin-top: 10px;
            line-height: 40px;

            span {
                margin-left: 5px;
            }
        }
    }
    .logo{
        display: flex;
        .left{
            img{
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }

        }
        .right{
            display: flex;
            color: #7f7f7f;
            margin-left: 10px;
            svg{
                margin-top:12px;

            }
            .context{
                margin:18px 10px;
            }
        }
    }
    .introduce{
        p{
            color: #7f7f7f;
            margin-top: 10px;
            line-height: 30px;
        }

    }
}
</style>